<template>
  <div class="setups">
    <el-tabs type="border-card" style="height: 100%;" @tab-change="changeTab">
      <el-tab-pane v-for="(item, index) in tabList" :key="item.pointGroupId" :label="item.pointGroupName">
        <div
          style="display: flex; flex-wrap: wrap; width: 100%;padding: 20px 40px;height: 68vh; overflow-y:scroll;box-sizing: border-box;">
          <div v-for="(subItem, subindex) in tabvalueList"
            style="flex: 0 0 50%; box-sizing: border-box; padding: 10px;display: flex;">
            <div style="width: 30%;">{{ subItem.pointName }}：</div>

            <el-input v-model="subItem.value" placeholder="请输入内容"
              v-if="subItem.type == 'INT' || subItem.type == 'STRING' || subItem.type == 'FLOAT' || subItem.type == 'LONG'"
              style="width: 35%;height: 30px;" />
            <el-button type="primary" @click="setsubmit(1, subItem)"
              v-if="subItem.type == 'INT' || subItem.type == 'STRING' || subItem.type == 'FLOAT' || subItem.type == 'LONG'"
              style="margin-left: 10px;">提交</el-button>

            <div v-if="subItem.type == 'ENUM' || subItem.type == 'BUTTON'">
              <el-select v-model="subItem.value" placeholder="请内容" style="width: 240px;">
                <el-option v-for="item in subItem.content" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
              <el-button type="primary" style="margin-left: 10px;" @click="setsubmit(1, subItem)">提交</el-button>
            </div>

          </div>
        </div>
        <div style="width: 100%;text-align: center;margin-bottom: 20px;">
          <el-button type="primary" @click="downloadPointUpload">获取</el-button>
          <el-button type="primary" @click="setsubmit(0, '')">提交</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Bmscontrol",
  inheritAttrs: false,
});
import pointGroupApi, { } from '@/api/pointGroup'
import downloadApi, { downloadsubmit } from '@/api/download'

import BmscontrolApi, { parameter, PropertyByGroup } from "@/api/bmscontrol";
import { useRoute, useRouter } from 'vue-router';
// import { defineProps } from 'vue';
const props = defineProps({
  ld: {
    type: String,
    required: true,
  },
});
let deviceId = props.ld

let tabList = ref([
  {

    pointGroupId: "1836699086859034625",
    pointGroupName: "服务器配置"
  }
])
let tabvalueSle = ref([])

// 提交按钮
// let submitdata=ref<downloadsubmit>([])
let tabvalueList = ref<PropertyByGroup[]>([])
// console.log(props.ld,deviceId,'0000')

let route = useRoute()
let router = useRouter()
let deviceCode = ref()
let inputdata = ref([])
// if (route.query.deviceSN) {
//   console.log(route.query.deviceSN,deviceId,'111')
//   deviceCode.value=route.query.deviceSN
if (deviceId) {
  getPointGroupInfo()
}
let tabValue = ref(0)

// }
function getPointGroupInfo() {
  let data = {
    deviceId: String(deviceId)
  }
  pointGroupApi.getPropertyPointGroupInfo(data).then((res) => {
    tabList.value = res
    console.log(tabList.value[0].pointGroupId, '---');

    handleQuery(tabList.value[0].pointGroupId)

  })
}


// 查值
/** 查询 */
let groupIdvalue = ref()

const downloadPointUpload = useThrottleFn(() => {
  let data = {
    deviceId: deviceId,
    pointGroupTypeFlag: 'PROPERTY'
  }
  downloadApi.downloadPointUpload(data).then((download) => {
    console.log(download);
    setTimeout(() => {
      ElMessage.success('获取成功');
      handleQuery(tabList.value[tabValue.value].pointGroupId)
    }, 3000);
  })

}, 3000);
function handleQuery(itemvalue: any) {
  console.log('jinlai', itemvalue, deviceId)
  const Did = deviceId as unknown as number;
  const Gid = itemvalue as unknown as number;
  groupIdvalue.value = Gid
  let data = {
    deviceId: Did,
    groupId: Gid
  }
  console.log(data.deviceId, data.groupId, '000');

  BmscontrolApi.getPropertyByGroupId(data).then((res) => {

    tabvalueList.value = res

  })
}


function changeTab(name: any) {
  tabValue.value = name as unknown as number;
  console.log('------------888888888888', tabValue.value, '0000000000000000000000000000');

  handleQuery(tabList.value[tabValue.value].pointGroupId)
}
// 提交按钮
// onMounted(() => {
//   getPointGroupInfo()
// });
interface poin {
  pointCode: string,
  value: string
}
function setsubmit(type: any, item: any) {
  if (type == 1) {
    let datas = {
      deviceId: deviceId as unknown as number,
      property: <poin[]>[]
    };
    const pointCode = item.pointCode;
    const value = item.value;
    let data = {
      pointCode: pointCode,
      value: value
    }
    datas.property.push(data);

    downloadApi.downloadProperty(datas).then((res) => {
      console.log(res, '000');
      ElMessage({
        message: '提交成功',
        type: "success",
      });
    })
  } else {



    let datas = {
      deviceId: deviceId as unknown as number,
      property: <poin[]>[]
    };

    for (let i in tabvalueList.value) {
      const pointCode = tabvalueList.value[i].pointCode;
      const value = tabvalueList.value[i].value;
      let data = {
        pointCode: pointCode,
        value: value
      }
      datas.property.push(data);
      console.log('0000', typeof (datas.deviceId), datas.deviceId);
      if (Number(i) == tabvalueList.value.length - 1) {
        downloadApi.downloadProperty(datas).then((res) => {
          console.log(res, '000');
          ElMessage({
            message: '提交成功',
            type: "success",
          });
        })
      }
    }
  }

}

</script>
<style lang="scss" scoped>
.setups {
  height: 100%;
}
</style>
